<template>
  <a-modal v-model:visible="visible" title="添加组件" width="90%" :footer="false">
    <a-layout class="component-library-container" style="display: flex">
      <!-- 左侧导航栏 -->
      <a-layout-sider :width="240" :style="{ background: '#fff', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }">
        <div class="search-box">
          <a-input-search placeholder="Search components..." />
        </div>
        <a-menu v-model:selected-keys="selectedKeys" :style="{ height: '100%', borderRight: 0 }">
          <a-menu-item v-for="item in menuData" :key="item.key">
            {{ item.label }}
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <!-- 右侧内容区 -->
      <a-layout-content :style="{ padding: '24px 40px 24px 24px', background: '#f5f5f5' }">
        <div class="component-section">
          <h2 class="section-title">{{ currentSection.label }}</h2>
          <p class="section-description">{{ currentSection.description }}</p>

          <div class="component-grid">
            <div
              v-for="(component, index) in currentComponents"
              :key="index"
              class="component-card"
              @click="selectComponent(component)"
            >
              <div class="thumbnail-placeholder">
                <!-- 这里应该是实际缩略图，示例使用占位色块 -->
                <div class="thumbnail-color" :style="{ backgroundColor: getRandomColor() }">
                  <!-- <component :is="getComponetnBytype(component.label)" v-model:model-value="componentValues[component.label]" /> -->
                  <!-- <ArticleList v-model:model-value="test" /> -->
                </div>
              </div>
              <div class="component-name">{{ component.label }}</div>
            </div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
    <!-- <ArticleList v-model:model-value="test" /> -->
  </a-modal>
</template>

<script setup>
import { reactive, ref, computed, watch } from "vue"; // 添加 reactive 导入

// import * as allPageComponents from "officialblock";
import { compJsonData } from "./compsData";
import { randomString } from "@/utils/common";

// 接收 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

// 定义事件
const emit = defineEmits(["update:visible", "ok", "cancel"]);

// 初始化组件映射
// const componentMap = allPageComponents;

// 响应式数据
const componentValues = reactive({});
const selectedKeys = ref(["common"]);
const menuData = ref(compJsonData);
const currentSection = ref({});
const currentComponents = computed(() => currentSection.value.children || []);

// 初始化 componentValues
watch(
  currentComponents,
  (newComponents) => {
    newComponents.forEach((comp) => {
      if (!componentValues[comp.label]) {
        componentValues[comp.label] = null;
      }
    });
  },
  { immediate: true }
);

// 监听菜单选择
watch(
  selectedKeys,
  (newValue) => {
    currentSection.value = menuData.value.find((item) => item.key === newValue[0]) || {};
  },
  { immediate: true }
);

// 获取组件方法

// 选择组件
const selectComponent = (comp) => {
  // emit('ok', JSON.parse(JSON.stringify(componentValues[val])))
  emit("ok", JSON.parse(JSON.stringify({ type: comp.label, id: randomString() })));
};

// 同步 visible 状态
const visible = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

// 生成随机颜色用于缩略图占位
const getRandomColor = () => {
  const colors = ["#3498db", "#2ecc71", "#e74c3c", "#f1c40f", "#9b59b6", "#1abc9c"];
  return colors[Math.floor(Math.random() * colors.length)];
};
</script>

<style lang="scss" scoped>
.component-library-container {
  height: 80vh;
  background: #f5f5f5;
}

.search-box {
  padding: 16px;
}

.component-section {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 24px;
  margin-bottom: 8px;
  color: #1d2129;
}

.section-description {
  color: #666;
  margin-bottom: 24px;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.component-card {
  background: #fff;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
  /* 直接集成悬停效果 */
  &:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 2;
    .thumbnail-placeholder {
      transform: translateZ(20px);
    }
  }
}

.thumbnail-placeholder {
  height: 180px;
  position: relative;
  overflow: hidden;
}

.thumbnail-color {
  width: 100%;
  height: 100%;
}

.component-name {
  padding: 16px;
  text-align: center;
  font-weight: 500;
  color: #333;
  border-top: 1px solid #eee;
}
</style>
